<template>
  <div class="classify">
    <!-- 顶部标签 -->
    <div class="top_biaoti">
      <van-nav-bar title="商品分类" left-arrow  @click-left="onClickLeft">
        <van-icon name="search" slot="right" />
      </van-nav-bar>
    </div>
    <!-- 导航栏 -->
    <div>
      <van-tabs v-model="activeKey">
       <van-tab v-for="(item,index) in classifylist" :key="index" :title="item.title">
         <van-grid :column-num="3" icon-size="50px">
       <van-grid-item v-for="(item,index) in gridslist" :key="index" :icon="item.grid_image" :text="item.grid_text"/>
         </van-grid>
       </van-tab>
      </van-tabs>
    </div>
    <!-- 底部标签栏 -->
    <div>
      <van-tabbar route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/classify">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/goshop">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact" to="/me">我的</van-tabbar-item>
      </van-tabbar>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      classifylist: [],
      gridslist: [],
      activeKey: 0
    }
  },
  created () {
    // 获取导航栏数据
    this.$http.get('/classify').then(res => {
      this.classifylist = res.data.data
    })
    // 获取数据
    this.$http.get('/grids').then(res => {
      // console.log(res.data.data)
      this.gridslist = res.data.data
    })
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.classify {
  background-color: #f3f5f7;
}
.van-nav-bar {
  background-color: #4990e0;
}
.van-nav-bar__title {
  color: #fff;
}
.van-nav-bar .van-icon{
  color: #fff;
}
</style>
